<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import * as echarts from 'echarts'

const chartRef = ref(null)
let chart = null

const departmentData = [
  { name: '政府部门', value: 85 },
  { name: '工商部门', value: 92 },
  { name: '税务部门', value: 78 },
  { name: '公安部门', value: 88 },
  { name: '法院部门', value: 82 }
]

const initChart = () => {
  if (!chartRef.value) return
  
  chart = echarts.init(chartRef.value)
  const option = {
    radar: {
      indicator: departmentData.map(item => ({
        name: item.name,
        max: 100
      })),
      splitNumber: 4,
      axisName: {
        color: '#94A3B8',
        fontSize: 12
      },
      splitLine: {
        lineStyle: {
          color: 'rgba(255, 255, 255, 0.1)'
        }
      },
      splitArea: {
        show: true,
        areaStyle: {
          color: ['rgba(255, 255, 255, 0.02)', 'rgba(255, 255, 255, 0.04)']
        }
      },
      axisLine: {
        lineStyle: {
          color: 'rgba(255, 255, 255, 0.1)'
        }
      }
    },
    series: [
      {
        type: 'radar',
        data: [
          {
            value: departmentData.map(item => item.value),
            name: '部门得分',
            symbol: 'circle',
            symbolSize: 6,
            lineStyle: {
              width: 2,
              color: '#60A5FA'
            },
            itemStyle: {
              color: '#60A5FA'
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: 'rgba(96, 165, 250, 0.3)' },
                { offset: 1, color: 'rgba(96, 165, 250, 0.1)' }
              ])
            },
            emphasis: {
              lineStyle: {
                width: 4
              }
            }
          }
        ]
      }
    ],
    tooltip: {
      trigger: 'item',
      backgroundColor: 'rgba(0, 0, 0, 0.8)',
      borderColor: 'rgba(255, 255, 255, 0.1)',
      borderWidth: 1,
      padding: [8, 12],
      textStyle: { color: '#fff' },
      formatter: (params) => {
        const value = params.value[params.dataIndex]
        return `${params.name}: ${value}分`
      }
    }
  }
  
  chart.setOption(option)
}

onMounted(() => {
  initChart()
  window.addEventListener('resize', () => chart?.resize())
})

onUnmounted(() => {
  chart?.dispose()
  window.removeEventListener('resize', () => chart?.resize())
})
</script>
<template>
  <div class="chart-card">
    <div class="chart-header">
      <div class="header-title">部门信用扣分情况</div>
      <div class="chart-actions">
        <div class="total-score">
          总扣分：<span class="score-value">-285</span>
        </div>
      </div>
    </div>
    <div class="chart-content">
      <div class="chart-wrapper" ref="chartRef"></div>
    </div>
  </div>
</template>
<style scoped lang="scss">
.chart-card {
  background: rgba(30, 41, 59, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 20px;
  backdrop-filter: blur(8px);
  height: 100%;
  display: flex;
  flex-direction: column;
}

.chart-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  padding: 0 4px;
  
  .header-title {
    color: #94A3B8;
    font-size: 16px;
    font-weight: 500;
    white-space: nowrap;
  }
}

.chart-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

.total-score {
  font-size: 14px;
  color: #94A3B8;
  white-space: nowrap;
  
  .score-value {
    color: #F87171;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 600;
    margin-left: 4px;
  }
}

.chart-content {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
}

.chart-wrapper {
  width: 100%;
  height: 100%;
  min-height: 300px;
}

@media (max-width: 1600px) {
  .chart-card {
    padding: 16px;
  }
  
  .chart-header {
    margin-bottom: 16px;
  }
  
  .chart-wrapper {
    min-height: 280px;
  }
}

@media (max-width: 1366px) {
  .chart-card {
    padding: 12px;
  }
  
  .chart-header {
    margin-bottom: 12px;
    
    .header-title {
      font-size: 15px;
    }
  }
  
  .total-score {
    font-size: 13px;
  }
  
  .chart-wrapper {
    min-height: 260px;
  }
}
</style> 